<template>
  <AForm ref="formRef" v-bind="$attrs" :model="formState">
    <AFormItem label="用户名称" name="userName" :rules="props.rules?.userName">
      <AInput v-model:value="formState.userName" placeholder="请输入用户名称" :maxlength="30"></AInput>
    </AFormItem>
    <AFormItem label="用户昵称" name="nickName" :rules="props.rules?.nickName">
      <AInput v-model:value="formState.nickName" placeholder="请输入用户昵称" :maxlength="30"></AInput>
    </AFormItem>
    <AFormItem label="手机号码" name="phoneNumber" :rules="props.rules?.phoneNumber">
      <AInput v-model:value="formState.phoneNumber" placeholder="请输入手机号码" :maxlength="11"></AInput>
    </AFormItem>
    <AFormItem label="邮箱地址" name="email" :rules="props.rules?.email">
      <AInput v-model:value="formState.email" placeholder="请输入邮箱地址" :maxlength="50"></AInput>
    </AFormItem>
    <AFormItem label="用户状态" name="status">
      <ARadioGroup v-model:value="formState.status" name="radioGroup">
        <ARadio :value="0">正常</ARadio>
        <ARadio :value="1">停用</ARadio>
      </ARadioGroup>
    </AFormItem>
    <AFormItem label="备注" name="remark" :rules="props.rules?.remark">
      <ATextarea v-model:value="formState.remark" placeholder="请输入内容" auto-size :maxlength="200"></ATextarea>
    </AFormItem>
  </AForm>
</template>

<script setup>
import { ref } from 'vue';

defineOptions({
  inheritAttrs: false // 禁用透传
});

const props = defineProps({
  rules: { type: Object, default: () => ({}) }
});
const formRef = ref(null);
const formState = defineModel('value', { type: Object, default: () => ({}) });

defineExpose({
  // 暴露给父组件的方法
  callback: formRef
});
</script>

<style lang="scss" scoped></style>
